<template>
  <m-page-wrapper>
    <m-crud ref="crudRef" :option="option">
    </m-crud>
  </m-page-wrapper>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CrudType } from '/@/components/Crud/types';
const crudRef = ref()
const option = ref<CrudType>({
  // 不显示搜索
  showSearch: false,
  // 弹窗类型
  // dialogType: 'drawer',
  // 弹窗属性
  dialogProps: {
    width: '60%'
  },
  // 表单属性
  formProps: {
    labelWidth: '100px',
    // labelCol: { flex: '100px' },
  },
  // 标题
  title: '部门',
  // 列表接口
  api: '/sys/dept/tree',
  // 添加保存接口
  saveApi: '/sys/dept/save',
  // 添加保存接口
  updateApi: '/sys/dept/update',
  // 删除接口
  delApi: '/sys/dept/remove',
  // 添加的权限码
  addPerms: 'sys:dept:save',
  // 修改的权限码
  editPerms: 'sys:dept:update',
  // 查看的权限码
  viewPerms: 'sys:dept:detail',
  // 删除的权限码
  delPerms: 'sys:dept:remove',
  columns: [
    {
      title: '部门ID',
      dataIndex: 'id',
      key: 'id',
      list: false,
      view: false,
      add: false,
      edit: false,
      component: 'Input',
      componentProps: {
        type: "text",
        maxlength: 20,
      },
      rules: [{ required: false, message: '请输入部门ID', trigger: 'blur' }]
    },
    {
      title: '上级部门',
      dataIndex: 'parentId',
      key: 'parentId',
      list: false,
      view: true,
      add: true,
      edit: true,
      component: 'TreeSelect',
      componentProps: {
        immediate: false,
        labelField: "name",
        valueField: "id",
        api: "/sys/dept/tree",
      },
      rules: [{ required: false, message: '请输入上级部门', trigger: 'blur' }]
    },
    {
      title: '部门名称',
      dataIndex: 'name',
      key: 'name',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
        type: "text",
        maxlength: 20,
      },
      rules: [{ required: true, message: '请输入部门名称', trigger: 'blur' }]
    },
    {
      title: '唯一编码',
      dataIndex: 'code',
      key: 'code',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
      },
      rules: [{ required: true, message: '请输入唯一编码', trigger: 'blur' }]
    },
    {
      title: '排序',
      dataIndex: 'sort',
      key: 'sort',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Input',
      componentProps: {
        type: "number",
      },
      rules: [{ required: true, message: '请输入排序', trigger: 'blur' }]
    },
    {
      title: '是否启用',
      dataIndex: 'enabled',
      key: 'enabled',
      list: true,
      view: true,
      add: true,
      edit: true,
      defaultValue: 1,
      component: 'Dict',
      componentProps: {
        renderType: "RadioGroup",
        code: "yes_no",
      },
      rules: [{ required: true, message: '请输入是否启用', trigger: 'blur' }]
    },
    {
      title: '部门负责人',
      dataIndex: 'leaderIds',
      key: 'leaderIds',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'Select',
      componentProps: {
        immediate: false,
        api: "/sys/user/select",
        mode: "multiple",
      },
      rules: [{ required: false, message: '请输入部门负责人', trigger: 'blur' }]
    },
    {
      title: '分管领导',
      dataIndex: 'mainLeaderId',
      key: 'mainLeaderId',
      list: false,
      view: true,
      add: true,
      edit: true,
      component: 'Select',
      componentProps: {
        immediate: false,
        api: "/sys/user/select",
      },
      rules: [{ required: false, message: '请输入分管领导', trigger: 'blur' }]
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      list: true,
      view: true,
      add: true,
      edit: true,
      component: 'TextArea',
      componentProps: {
        maxlength: 255,
        showCount: true,
        rows: 3,
      },
      rules: [{ required: false, message: '请输入备注', trigger: 'blur' }]
    },]
    ,
    treeProps: {
      btnText: '子部门',
      btnPerms: '/sys/dept:save'
    }
})
</script>
<style lang="less" scoped>

</style>